<template>
  <view class="page page-grey address-list-blue">
    <view class="page-list" v-for="item in listData" :key="item.id + ''">
      <view @click="handleItemCheck(item.id)">
        <view class="page-list-title">{{ item.name }} <text>{{ item.mobile }}</text></view>
        <view class="page-list-text">{{ item.detailAddress }}</view>
      </view>
      <view class="page-list-bottom">
        <view class="list-left" v-if="isSelector" @click="handleItemCheck(item.id)">
          <fui-icon :name="checkedAddress == item.id ? 'checkbox-fill' : 'checkround'" :color="checkedAddress == item.id ? 'var(--fui-color-primary)' : '#999'" size="40"></fui-icon>
          <label>选择地址</label>
        </view>
        <fui-label class="list-left" v-else></fui-label>
        <view class="list-right">
          <view  @click="tab.navigateTo(`${formLink}?addressId=${item.id}`)" style="margin-right: 32rpx;">
            <fui-icon name="edit" color="#666666" :size="36"></fui-icon>
            <text>编辑</text>
          </view>
          <view @click="handleDelete(item.id)">
            <fui-icon name="delete" color="#666666" :size="32"></fui-icon>
            <text>删除</text>
          </view>
        </view>
      </view>
    </view>
    <fui-empty v-show="!listData.length" src="/static/images/empty/data.png" title="暂无退货地址数据" :marginTop="280" size="28" color="#999"></fui-empty>
    <view class="ui-fixed-footer page-footer">
      <fui-button text="新增退货地址" height="78rpx" @click="tab.navigateTo(formLink)"></fui-button>
    </view>

    <fui-safe-area background="transparent"></fui-safe-area>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import { setTitle } from '@/utils/common'
import systemApi from '@/api/system'
import addressApi from '@/api/address'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const formLink = '/pages/address/form'

const isSelector = ref(false)
onLoad((option) => {
  if (option.addressId) checkedAddress.value = option.addressId
  if (option.isSelector) isSelector.value = true
})

onShow(() => {
  // getAddressList()
})

// 选择退货地址
const checkedAddress = ref()
const handleItemCheck = (value) => {
  if (!isSelector.value) return
  const addressObj = listData.value.find(item => item.id == value)
  uni.$emit('onCheckedAddress', addressObj)
  tab.navigateBack()
}

// 获取退货地址列表
const listData = ref([
  { id: '001', name: '李珍', mobile: '17711881892', areaId: '001', areaName: '宁夏银川市金凤区', detailAddress: '中海城100-1' }
])
const getAddressList = () => {
  try {
    modal.loading()
    addressApi.getAddressList().then((res) => {
      modal.closeLoading()
      if (res.code === 0) {
        listData.value = res.data || []
      }
    }).catch(err => {
      modal.closeLoading()
      modal.msgError(err.msg)
    })
  } catch (e) {
    modal.closeLoading()
    modal.msgError('获取退货地址失败！')
  }
}

// 删除退货地址
const handleDelete = (id) => {
  modal.confirm('确定删除该地址？').then(() => {
    try {
      modal.loading()
      addressApi.deleteAddress(id).then((res) => {
        modal.closeLoading()
        if (res.code === 0) {
          modal.msgError('退货地址已删除！')
          getAddressList()
        }
      }).catch(err => {
        modal.closeLoading()
        modal.msgError(err.msg)
      })
    } catch (e) {
      modal.closeLoading()
      modal.msgError('获取退货地址失败！')
    }
  })
}
</script>

<style lang="scss" scoped>
.page {
  padding: 36rpx 24rpx 150rpx;
  box-sizing: border-box;
  font-family: PingFang SC, PingFang SC;

  .address-subtitle {
    padding: 10rpx 24rpx;
    line-height: 60rpx;
    font-size: 24rpx;
    color: #999;
  }

  &-list {
    width: 100%;
    padding: 24rpx 30rpx;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #999999;
    margin-bottom: 30rpx;
    position: relative;
    
    &.active {
      background-color: #fdf0f0;
    }

    &.disabled {
      opacity: .8;
      ::v-deep .fui-radio__disabled {
        background-color: #999 !important;
      }
    }

    &-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 16rpx;

      text {
        font-size: 28rpx;
        color: #999999;
        font-weight: 400;
        padding-left: 20rpx;
      }
    }

    &-text {
      text {
        padding-left: 20rpx;
        font-size: 24rpx;
        color: #333333;
      }
    }

    .page-list-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #f1f1f1;
      margin-top: 24rpx;
      padding: 12rpx 0 0 0;
      font-size: 24rpx;
      color: #666666;

      .list-left {
        display: flex;
        align-items: center;

        label {
          padding-left: 20rpx;
        }
      }

      .list-right {
        display: flex;
        align-items: center;

        text {
          padding-left: 8rpx;
        }
      }
    }
  }

  &.address-list-blue{
    .page-footer{
      :deep(.fui-button__primary){
        background: var(--fui-color-primary) !important;
      }
    }
  }

  /* 设置滚动条宽度 */
  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    color: transparent !important;
    display: none;
  }
}
</style>